<template>
  <epgis-nav-container title="自我介绍">
    <template #container>
      <div style= "height: 100%; width: 100%;background: white;" class="layoutVerticle">
        <div style=" margin: 20px;">
          <van-field
            style="background: #f6f6f6;border-radius: 8px; padding: 10px;"
            v-model="userInfo['selfDescription']"
            label=""
            type="textarea"
            rows="6"
            autosize
            :maxlength="400"
            show-word-limit
            placeholder="请做一个自我介绍吧，可以讲讲你的求学经历、职场经历，家庭背景、性格等等。请勿填写联系方式哦">
          </van-field>  
          <span style="color: #2c2c2c; margin-top: 20px; display: inline-block; font-size: 13px;" >例如，可以这样写</span>
          <van-field 
            value="老家是福建漳州的小县城，现在定居于厦门市。自己是独生子女、小康家庭。平时生活圈比较窄，希望在这遇到心仪的ta~"
            disabled
            name="家庭"
            label="家庭"
            type="textarea"
            rows="3"
            autosize>
          </van-field>
          <van-field 
            value="大学就读于厦门大学，在校成绩优异"
            disabled
            name="学业"
            label="学业"
            type="textarea"
            rows="1"
            autosize>
          </van-field>
          <van-field 
            value="互联网行业新媒体运营"
            disabled
            name="工作"
            label="工作"
            type="textarea"
            rows="1"
            autosize>
          </van-field>
          <van-field 
            value="我对学习、工作比较认真上进，性格上温和友善、自信大方"
            disabled
            name="性格"
            label="性格"
            type="textarea"
            rows="1"
            autosize>
          </van-field>
          <van-field 
            value="我平时喜欢和朋友一起打打篮球和羽毛球"
            disabled
            name="爱好"
            label="爱好"
            type="textarea"
            rows="1"
            autosize>
          </van-field>
        </div>

        

        <van-button @click="submitMsg" type="primary" style="position: absolute;bottom: 68px; left: 12%; right: 12%; margin: 0 auto;border-radius: 8px;" >
          提 交
        </van-button>

      </div>
    </template>
  </epgis-nav-container>
</template>

<script>
import { Http, Uploader } from "@/common/HttpClient";
import { Toast, Notify } from "vant";
export default {
  components: {},
  data() {
    return {
      userInfo:{
        selfDescription:"",
      }
    };
  },
  created(){
    this.requestUserInfo();
  },
  mounted() {
  },
  destroyed() {
  },
  activated() {
    
  },
  methods: {
    submitMsg() {
      if(this.checkValue()){
        this.submitRegist();
      }
    },

    checkValue(){
      if (!userInfo['selfDescription']) {
        Notify({
            type: "danger",
            message: "请输入建议内容",
        });
        return false;
      } 
      return true;
    },

    requestUserInfo(){
      let that = this;
      Http.instance()
        .postJSON({
          url: "/makeFriends/sys/user/info",
          params: {
          },
        })
        .then((result) => {
          console.log("用户信息：" + JSON.stringify(result));
          if(result && result['user']){
            this.userInfo = result['user'];
          }
        }).catch((result) =>{
          console.log("错误信息：" + result);
          Notify({
            type: "danger",
            message: "" + result,
          });
        });
    },

    submitMsg(){
      Http.instance()
        .postJSON({
          url: "/makeFriends/sys/user/update",
          params: {
            selfDescription:this.userInfo['selfDescription'],
            userId:this.userInfo['userId'],
          }
        })
        .then((result) => {
          this.$bus.$emit("refreshUserInfo", null);
          Notify({
            type: "success",
            message: "提交信息成功",
          });
          this.$router.go(-1);
        }).catch((result) =>{
          console.log("错误信息：" + result);
          Notify({
            type: "danger",
            message: "" + result,
          });
        });
    },





    




  },
};
</script>

<style lang="less" scoped>

  .layoutVerticle{
    display: flex;
    flex-direction: column;
  }

  .layoutHorizontal{
    display: flex;
    flex-direction: row;
  }

  .layoutCenter{
    justify-content: center;
    align-items: center;
  }

  /deep/.van-field--disabled .van-field__label {
    color: #707070;
    width: 2.2em;
  }

  /deep/.van-field__control:disabled {
    color: #707070;
    -webkit-text-fill-color: #707070;
  }

  /deep/.van-cell {
    padding: 6px 0px 0px 0px;
    font-size: 13px;
  }

  /deep/.van-cell::after {
    border-bottom: none;
  }





</style>